<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src='../../dist/avalon.js'></script>
        <script>
            function heredoc(fn) {
                return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                        replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
            }
            avalon.component('ms-grid', {
                template: heredoc(function () {
                    /*
                     <div class="grid">
                     <div><slot name="header"/></div>
                     <div><slot name="tbody"/></div>
                     <div class="pager"><slot name="pager" /></div>
                     </div>
                     */
                }),
                defaults: {}
            })

            function genData(n) {
                var list = []
                for (var i = 0; i < n; i++) {
                    list.push({
                        aaa: new Date - i,
                        bbb: Math.random().toString(32).replace(/0\./, ""),
                        ccc: (Math.random() + "").replace(/0\./, ""),
                        ddd: i
                    })
                }
                return list
            }
            var vm = avalon.define({
                $id: 'widget1',
                header: ['aaa', 'bbb', 'ccc'],
                start: 0,
                count: 10,
                data: genData(300),
                aaa: function (e) {
                    e.vmodel.$watch('currentPage', function (a) {
                        vm.start = a - 1
                        avalon.log(vm.start)
                    })
                },
                ddd: 'bbb'
            })

            avalon.component("ms-pager", {
                template: heredoc(function () {
                    /*
                     <div class="pagination">
                     <ul>
                     <li :for="el in @pages" 
                     :class="[ el == @currentPage && 'active' ]">
                     <a href="javascript:void(0)" :click="@gotoPage(el, $event)">{{el}}</a>
                     </li>
                     </ul>
                     </div>
                     */
                }),
                defaults: {
                    totalPage: 25,
                    currentPage: 1,
                    showPage: 7,
                    pages: [1, 2, 3, 4, 5, 6, 7],
                    gotoPage: function (page, e) {
                        this.currentPage = page;
                        this.pages = this.getPages();
                    },
                    getPages: function () {
                        var pages = [];
                        var s = this.showPage, l = this.currentPage, r = this.currentPage, c = this.totalPage;
                        pages.push(l);
                        while (true) {
                            if (pages.length >= s) {
                                break;
                            }
                            if (l > 1) {
                                pages.unshift(--l);
                            }
                            if (pages.length >= s) {
                                break;
                            }
                            if (r < c) {
                                pages.push(++r);
                            }
                        }

                        return pages;
                    }
                }
            });
            //
        </script>
    </head>
    <body>
        <style>
            .header {
                border:1px solid #000;
                width: 600px;
                border-collapse: collapse;
            }
            .header td{
                border:1px solid #000;
                text-align: center;
                font-weight: 700;
                height:30px;
                color: #607fa6;
                font-weight: 700;
            }
            .tbody{
                width: 600px;
                margin-top: -1px;
                border:1px solid #000;
                border-collapse: collapse;
            }
            .tbody td{
                border:1px solid #000;
                height: 30px;
            }

            .pagination ul{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .pagination li{
                float: left;
            }
            .pagination li a{
                text-decoration: none;
                display: inline-block;
                width:40px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: #fafafa;
                color:#000;

            }
            .pagination .active a{
                background: #009a61;
                color:#fff;
            }
            .pager{
                width:600px;
                background: #fafafa;
            }
            .pager > *{
                float: right;

            }

        </style>
        <div ms-controller='widget1' >

            <xmp :widget="{is:'ms-grid'}">
                <table slot='header' class="header">
                    <tr>
                        <td :for="el in @header" style="width:200px" >
                            {{el}}
                    </td>
                </tr>
            </table>
            <table slot="tbody" class="tbody">
                <tr :for="obj in @data | limitBy(@count, @start)">
                    <td :for="el in obj | selectBy(@header)" style="width:200px">{{el}}</td>
                </tr>
            </table> 
            <ms-pager slot="pager" :widget="{onReady:@aaa}" />
    </xmp>

</div>
需要写一个渲染GRID的组件测试
</body>
</html>
